<template>
    <div>
        <el-header>
            <headers1>
                <h4 slot="title">个人中心</h4>
            </headers1>
        </el-header>
        <el-main style="margin-top:1rem;">
            <el-row>
                <el-col>
                    <el-card shadow="never">
                        <el-row v-if="$store.state.user">
                            <el-col :offset="1" :span="2">用户名：</el-col>
                            <el-col :span="19">{{$store.state.user.username}}</el-col>
                        </el-row>
                        <el-row v-if="$store.state.user" style="margin-top:1rem;">
                            <el-col :offset="1" :span="2">手机号：</el-col>
                            <el-col :span="19">{{$store.state.user.phone}}</el-col>
                        </el-row>
                        <el-row v-if="$store.state.user" style="margin-top:1rem;">
                            <el-col :offset="1" :span="2">余额：</el-col>
                            <el-col :span="2">
                                <i class="el-icon-coin" style="font-size:20px;color:#c59337;"></i>
                                {{this.$store.state.user.money}}
                            </el-col>
                            <el-col :span="2">
                                <el-link @click="recharge" type="primary">充值</el-link>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <el-row style="margin-top:2rem;">
                <el-card shadow="never">
                    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom:2rem;">
                        <el-tab-pane label="订单" name="first">

                            <el-row>
                                <el-col>
                                    <el-table :data="orders" :span-method="objectSpanMethod"
                                        style="width: 100%; margin-top: 20px">
                                        <el-table-column prop="id" label="订单号" width="180">
                                        </el-table-column>
                                        <el-table-column label="商品" width="400">
                                            <template slot-scope="scope">

                                                <el-row>
                                                    <el-col :span="4">
                                                        <img :src="scope.row.pic" style="width:50px;">
                                                    </el-col>
                                                    <el-col :span="20">
                                                        <p @click="skip_detail(scope.row.commodityId)"
                                                            style="cursor:pointer;">{{ scope.row.commodityName }}</p>
                                                    </el-col>
                                                </el-row>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="price" label="单价" width="100">
                                        </el-table-column>
                                        <el-table-column prop="commodityNum" label="数量" width="50">
                                        </el-table-column>
                                        <el-table-column prop="total" label="合计" width="100">
                                        </el-table-column>
                                        <el-table-column prop="orderstatus" label="状态" width="100"
                                            :formatter="formatstatus">
                                        </el-table-column>
                                        <el-table-column prop="createTime" label="下单时间">
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope" width="150">
                                                <el-link type="primary" @click="order_pay(scope.row)"
                                                    style="margin-left:1rem" v-if="scope.row.orderstatus==0">付款</el-link>
                                                <el-link type="primary" style="margin-left:1rem"
                                                    v-if="scope.row.orderstatus==0"
                                                    @click="deleteOrder(scope.$index,scope.row)">
                                                    删除订单</el-link>
                                                <!-- <el-link type="primary" style="margin-left:1rem"
                                                    v-if="scope.row.orderstatus>0">退款</el-link> -->
                                                <el-link type="primary" style="margin-left:1rem"
                                                    v-if="scope.row.orderstatus>=1" @click="recharge">物流</el-link>
                                                <el-link type="primary" style="margin-left:1rem"
                                                    v-if="scope.row.orderstatus==2" @click="recharge">收货</el-link>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>

                            <el-row style="margin-top:2rem;">
                                <el-col :offset="10" :span="10">
                                    <el-pagination layout="prev, pager, next" @current-change="order_page_change"
                                        :page-size="order_limit" :total="order_total" :hide-on-single-page="true">
                                    </el-pagination>
                                </el-col>
                            </el-row>

                        </el-tab-pane>
                        <el-tab-pane label="地址" name="second">
                            <el-row>
                                <el-col :span="2" :offset="22">
                                    <el-button @click="addAdress">新增</el-button>
                                </el-col>
                            </el-row>

                            <el-table :data="addresses" style="width: 100%" highlight-current-row>
                                <el-table-column label="姓名" width="180">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="电话" width="180">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.phone }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="地址" width="300">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.address }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-link @click="handleEdit(scope.row)"  icon="el-icon-edit-outline">编辑</el-link>
                                        <el-link @click="handleDelete(scope.$index, scope.row)"  icon="el-icon-document-delete"
                                            style="margin-left:1rem;">删除</el-link>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </el-tab-pane>
                    </el-tabs>
                </el-card>

            </el-row>
            <el-dialog title="新增或编辑地址" :visible.sync="dialogVisible" width="30%">
                <el-form label-width="80px" :model="address">
                    <el-form-item label="姓名">
                        <el-input v-model="address.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="address.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="address.address"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog v-if="paydialogVisible" title="支付" :visible.sync="paydialogVisible" width="25%" :before-close="cancelpay">
            <el-tabs v-model="activeName" type="card" style="height:350px;">
                <el-tab-pane label="余额支付" name="first">
                    <p>
                        <i class="el-icon-coin" style="font-size:20px;color:#c59337;"></i>
                        <span>{{$store.state.user.money}}</span>
                    </p>
                    <el-row style="margin-top:3rem;">
                        <el-col :span="3" :offset="4">
                            订单号：
                        </el-col>
                        <el-col :span="14">
                            {{commodityorder.id}}
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:1rem;">
                        <el-col :span="3" :offset="4">
                            订单金额：
                        </el-col>
                        <el-col :span="14">
                            {{commodityorder.total}}
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:5rem;">
                        <el-col :offset="10" v-if="parseInt($store.state.user.money)>parseInt(commodityorder.total)">
                            <el-button type="success" @click="pay">确定支付</el-button>
                        </el-col>
                        <el-col :offset="10" v-if="parseInt($store.state.user.money)<parseInt(commodityorder.total)">
                            <el-button type="success" disabled>余额不足</el-button>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="支付宝或微信" name="second" disabled></el-tab-pane>
                <el-tab-pane label="银行卡支付" name="third" disabled></el-tab-pane>
            </el-tabs>
        </el-dialog>
        </el-main>
    </div>
</template>

<style scoped>

</style>

<script>
    import headers1 from '@/components/headers1.vue'
    export default {
        data: () => {
            return {

                activeName: "first",
                addresses: [],
                orders: [],

                dialogVisible: false,
                address: {
                    name: '',
                    phone: '',
                    address: ''
                },
                isinsert: false,

                order_page: 1,
                order_limit: 5,
                order_total: 0,

                paydialogVisible:false,
                commodityorder:{}

            }
        },
        components: {
            headers1
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            order_page_change(val) {
                this.order_page = val
                console.log(val)
                this.getorder()
            },
            objectSpanMethod({
                row,
                columnIndex
            }) {
                let identification = row.identification
                let orderLength = row.orderLength
                if (columnIndex === 0 | columnIndex === 4 | columnIndex === 5 | columnIndex === 6 | columnIndex === 7) {
                    if (identification == true) {
                        return {
                            rowspan: orderLength,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            },
            formatstatus(row, cpl, val) {
                if (val == 0) {
                    return "未付款"
                } else if (val == 1) {
                    return "已付款"
                } else if (val == 2) {
                    return "已发货"
                } else if (val == 3) {
                    return "完成"
                }

            },
            skip_detail(id) {
                this.$router.push("detail?id=" + id)
            },
            deleteOrder(index, row) {
                this.$confirm('此操作将永久删除该订单, 是否继续?', '删除订单', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    let token = localStorage.getItem('token')
                    this.$axios.delete(this.$store.state.base_url + "/order/" + row.id + "?token=" + token)
                        .then(data => {
                            if (data.data.code == "SUCCESS") {
                                this.getorder()
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(data.data.message);
                            }
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            order_pay(row){
                this.commodityorder=row
                this.paydialogVisible=true
            },
            pay() {
                let token = localStorage.getItem('token')
                if (token != null) {
                    //支付
                    let obj = {
                        commodityorderId: this.commodityorder.id,
                        mode: 1
                    }
                    this.$axios.post(this.$store.state.base_url + "/payment/?token=" + token, obj).then(data => {
                        if (data.data.code == "SUCCESS") {
                            this.$message({
                                message: '支付成功',
                                type: 'success'
                            });
                            this.$store.commit("setUserMoney",parseInt(this.$store.state.user.money)-parseInt(this.commodityorder.total))
                            this.getorder()
                            this.paydialogVisible=false
                        } else {
                            this.$message.error(data.data.message);
                        }
                    })

                } else {
                    this.$message.error("token过期，请重新登陆");

                }
            },
            cancelpay(){
                this.paydialogVisible=false
                this.$message({
                    type: 'info',
                    message: "已取消支付，可在个人中心查看订单，并完成支付"
                });
                this.$router.push("personalcenter")
            },
            addAdress() {
                this.address = {
                        name: '',
                        phone: '',
                        address: ''
                    },
                    this.dialogVisible = true
                this.isinsert = true
            },
            handleEdit(row) {

                this.address = row
                this.dialogVisible = true
                this.isinsert = false
            },
            handleDelete(index, row) {
                //console.log(index, row.name)
                let token = localStorage.getItem('token')
                this.$axios.delete(this.$store.state.base_url + "/address/" + row.id + "?token=" + token).then(data => {
                    if (data.data.code == "SUCCESS") {
                        this.addresses.splice(index, 1)
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(data.data.message);
                    }
                })
            },
            submit() {
                if (this.isinsert) {
                    //新增
                    let token = localStorage.getItem('token')
                    this.$axios.post(this.$store.state.base_url + "/address/?token=" + token, this.address).then(
                        data => {
                            if (data.data.code == "SUCCESS") {
                                this.$message({
                                    message: '新增成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(data.data.message);
                            }
                            this.getAddresses()
                            this.dialogVisible = false
                        })
                } else {
                    //编辑
                    let token = localStorage.getItem('token')
                    this.$axios.put(this.$store.state.base_url + "/address/?token=" + token, this.address).then(
                        data => {
                            if (data.data.code == "SUCCESS") {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(data.data.message);
                            }
                        })
                    this.$set(this.addresses, this.address.$index, this.address)
                    this.dialogVisible = false
                    this.address.$index = 0
                    //console.log(this.address)
                }
            },
            getAddresses() {
                let token = localStorage.getItem('token')
                if (token != null) {
                    this.$axios.get(this.$store.state.base_url + "/address/?token=" + token).then(data => {
                        //console.log(data)
                        this.addresses = data.data.data
                    })
                } else {
                    this.$message.error("请先进行登陆");
                    this.$router.push("login")
                }
            },
            getorder() {
                let token = localStorage.getItem('token')
                if (token != null) {
                    this.$axios.get(this.$store.state.base_url + "/order/?token=" + token + "&page=" + this.order_page +
                        "&limit=" + this.order_limit).then(data => {
                        //console.log(data)
                        let origin_orders = data.data.data.data
                        let new_orders = []
                        //数据进行处理
                        for (const iterator of origin_orders) {
                            let identification = true //用于表格合并，标记订单下的第一条数据
                            let orderLength = iterator.orderToCommodities.length //标记订单长度     
                            for (const item of iterator.orderToCommodities) {
                                let obj = {}
                                obj.identification = identification
                                obj.orderLength = orderLength
                                obj.addressId = iterator.addressId
                                obj.id = iterator.id
                                obj.total = iterator.total
                                obj.orderstatus = iterator.status
                                obj.payment = iterator.payment
                                obj.createTime = iterator.createTime
                                obj.commodityNum = item.commodityNum
                                obj.commodityName = item.commodity.commodityName
                                obj.commodityId = item.commodity.id
                                obj.pic = item.commodity.listPic
                                obj.price = item.commodity.price
                                console.log(obj.orderstatus, obj)
                                new_orders.push(obj)
                                identification = false
                            }
                        }
                        this.orders = new_orders
                        this.order_total = data.data.data.page.total
                        console.log(origin_orders, new_orders)
                        //console.log(this.order_total)

                    })
                } else {
                    this.$message.error("请先进行登陆");
                    this.$router.push("login")
                }
            },
            recharge() {
                this.$message({
                    message: '此功能暂未开放，此商城仅作为演示使用',
                    type: 'warning'
                });
            }

        },
        created() {
            this.getAddresses()
            this.getorder()
            
        },
        mounted(){

        }

    }
</script>